{extend name="index/base" /}
{block name='title'}User Info{/block}
{block name='content'}

<div class="container clearfix my-5 pb-1">
    {include file="user/leftMenu" name="MY ACCOUNT" route="user/index"/}

    <div class="userBox">
        <div class="personalInfo account-setting-info">
            <form name="formEdit" action="">
                <ul>
                    <li class="avavtar-contanier">
                        <div class="label-skin">Avatar</div>
                        <div class="avatarBox">
                            <img :src="temp.avatar" width="100" height="100" id="my_avatar">
                            <p class="upload" id="hintUpload">

                                <file-upload
                                        :showFileList="false"
                                        :upload-success="onHandleSuccessFile"
                                >
                                    <a href="javascript:;" slot="trigger"  >Upload Avatar</a>

                                </file-upload>

                            </p>
                        </div>

                    </li>
                    <li>
                        <div class="ui-input-group">
                            <div class="label-skin">Nick Name</div>
                            <input name="nickname" type="text" class="input-skin " v-model="temp.name"
                                size="15">
                            <!-- <label for="nickname" class="error">The nickname is already in use</label> -->
                        </div>
                    </li>

                    <li>
                        <div class="label-skin">Birthday</div>

                        <div class="birthday-block">
                            <div class="ui-input-group">
                                <select name="month" v-model="temp.month" class="input-skin" id="month">
                                    <option value="">Month</option>
                                    {for start="1" end="13"}
                                    <option value="{$i}">{$i}</option>
                                    {/for}
                                </select>
                            </div>
                            <div class="ui-input-group"> <select name="day" v-model="temp.day" class="input-skin"
                                    id="day">
                                    <option value="">Day</option>
                                    {for start="1" end="32"}
                                    <option value="{$i}">{$i}</option>
                                    {/for}
                                </select></div>
                            <div class="ui-input-group"> <select name="year" v-model="temp.year" class="input-skin"
                                    id="year">
                                    <option value="">Year</option>
                                    {for start="0" end="121"}
                                    <option value="<?php echo date('Y')-$i; ?>">
                                        <?php echo date('Y')-$i; ?>
                                    </option>
                                    {/for}
                                </select>
                            </div>
                            <input type="hidden" name="birthday" value="//">

                        </div>
                    </li>
                    <li>
                        <div class="label-skin">Gender</div>
                        <div>
                            <label>
                                <span class="ui-custom-radio">
                                    <input type="radio" name="sex" v-model="temp.sex" value="2">
                                    <span class="ui-custom-radio-checked"></span>
                                </span>
                                Female
                            </label>
                            <label class="mx-4">
                                <span class="ui-custom-radio">
                                    <input type="radio" name="sex" v-model="temp.sex" value="1"><span
                                        class="ui-custom-radio-checked"></span>
                                </span>
                                Male
                            </label>
                        </div>
                    </li>

                    <!--<li>
                        <div class="label-skin">Phone</div>

                        <div class="ui-input-group">
                            <input name="other[phone]" v-model="temp.phone" type="text" class="input-skin valid">
                        </div>
                    </li>-->

                    <li>
                        <div class="label-skin">E-mail address</div>
                        <div class="ui-input-group">
                            <div class="input-skin">
                                <span class="email-text">{:$user_model['email']}</span>
                            </div>
                        </div>
                    </li>

                   <!-- <li class="perference-container">
                        <h5>*Preference</h5>
                        <h4> Please pick your favorite categories:</h4>

                        <div class="favorite-cate">
                            <span class="perference-item checked" data-id="1">
                                <span class="js-label-name">Bikinis</span>
                                <label><input type="checkbox" name="preference_lableids[]" value="1"></label></span>
                            <span class="perference-item " data-id="2">
                                <span class="js-label-name">One-Pieces</span>
                                <label><input type="checkbox" name="preference_lableids[]" value="2"></label>
                            </span>
                            <span class="perference-item " data-id="3">
                                <span class="js-label-name">Tankinis</span>
                                <label><input type="checkbox" name="preference_lableids[]" value="3"></label>
                            </span>
                            <span class="perference-item " data-id="4">
                                <span class="js-label-name">Cover Ups</span>
                                <label><input type="checkbox" name="preference_lableids[]" value="4"></label>
                            </span>
                            <span class="perference-item " data-id="5">
                                <span class="js-label-name">Top</span>
                                <label><input type="checkbox" name="preference_lableids[]" value="5"></label>
                            </span>
                            <span class="perference-item " data-id="6">
                                <span class="js-label-name">Bottoms</span>
                                <label><input type="checkbox" name="preference_lableids[]" value="6"></label>
                            </span>
                            <span class="perference-item " data-id="7">
                                <span class="js-label-name">Bags</span> <label>
                                    <input type="checkbox" name="preference_lableids[]" value="7"></label>
                            </span>
                            <span class="perference-item " data-id="8">
                                <span class="js-label-name">T-shirt</span>
                                <label><input type="checkbox" name="preference_lableids[]" value="8"></label>
                            </span>
                            <span class="perference-item " data-id="9">
                                <span class="js-label-name">Men's Swimwear</span>
                                <label><input type="checkbox" name="preference_lableids[]" value="9"></label>
                            </span>
                        </div>

                    </li>-->

                    <li class="tc submit-block">
                        <input name="a" type="hidden" value="edit_profile">
                        <button type="button" class="logsss_event_cl" title="Submit"
                            data-logsss-const-value="{'x':'Profile_Comfirm'}" @click="confirm">CONFIRM</button>
                    </li>

                </ul>
            </form>
        </div>
    </div>
</div>

{/block}
{block name='script'}

<script>

    layui.extend({
        fileUpload: 'vue-components/fileUpload',
    }).use(["fileUpload"], function (fileUpload) {
        initVue({
            data: {
                temp: {
                    avatar: '{:$user_model["avatar"]}',
                    name: '{:$user_model["name"]}',
                    sex: '{:$user_model["sex"]}',
                    year: '{:$user_model["year"]}',
                    month: '{:$user_model["month"]}',
                    day: '{:$user_model["day"]}',
                },
            },
            components: {
                'file-upload': fileUpload
            },
            computed: {

            },
            created: function () {

            },
            mounted: function () {

            },
            methods: {
                onHandleSuccessFile:function(res){
                    const data = res.data||{}
                    this.temp.avatar = data.key||''
                },
                confirm: function () {
                    const that = this
                    this.$network("user/modify", that.temp).then(function (res) {
                        that.$message.success(res.msg)
                    })
                }
            },
        })


    })

</script>

{/block}